html.light-blue {
  $baseColor: #ffffff;
  $textColor: #5b6775;
  $sideColor: #def2ff;
  $tableThColor: #eff9ff;
  $buttonPrimaryColor: #00a0e9;

  // 首页
  #app {
    background-image: none;

    // 场景列表
    .scenes-list-card-container .scene-card {
      background-color: #def2ff;
    }

    .xfv-icon-back {
      font-size: 25px;
    }

    // 场景详情
    .screen_content {
      color: var(--my-text-color);

      ::-webkit-scrollbar {
        width: 0px;
        /* 设置滚动条的宽度 */
        height: 0px;
        /* 设置滚动条的高度 */
      }

      .x6-widget-stencil-group-title,
      .x6-widget-stencil-title {
        background-color: #ecf5ff;
      }

      .x6-widget-stencil-search,
      .x6-widget-stencil-group-content {
        border: 1px solid #ecf5ff;
      }
    }

    // 拓扑设计
    .rightAside,
    .dragAside {
      background: $tableThColor;

      .imageList {
        background: $baseColor;
        border: none;
      }

      .imageList + .titleList {
        background: $sideColor;
      }
    }

    // 集群监控
    .cluster-monitor-container {
      .cluster-monitor-one,
      .alarm-monitoring-card-box,
      .resource-count-item {
        background-color: #fff;
        border: none;
      }

      .cluster-monitor-one .alarm-monitoring-card-title {
        border: none;
      }

      .alarm-monitoring-card-content {
        border: none;
      }
    }

    // 虚拟机、容器自动销毁
    .automatic-destruction-open {
      background-color: #eff6ff;
      border: 1px solid rgb(219 234 254);
    }

    .el-main {
      background: #f2f3f7;
    }

    .progress-speed-rate .el-button--primary {
      background-color: transparent;
    }

    .link-port-text {
      color: #5b6775;
    }

    .snapshot-table,
    .snapshot-table-scene {
      svg {
        color: $textColor;
        fill: currentColor;
      }
    }

    .abnormal-behavior-container .abnormal-behavior-item {
      background-image: none;
      box-shadow: 0px 4px 12px rgba(1, 16, 39, 0.16);

      .table-expand-json {
        background-color: $baseColor;
      }
    }

    .hitParadeTable .el-table__body-wrapper td .cell,
    .attackDefenseResult .el-table__body-wrapper td .cell {
      color: $baseColor;
    }

    .hitParadeTable .el-table th .cell,
    .attackDefenseResult .el-table th .cell {
      color: #97c8ff;
      font-weight: normal;
    }

    .stopOrStart {
      color: $textColor;
    }

    .behavioral-container-top {
      background: $sideColor;

      .left {
        .xfv-icon-back,
        span {
          color: $textColor;
        }
      }
    }

    // 头部导航相关
    .header-cont {
      background: transparent;
      border: none;

      .header-box {
        background: #009ee7;

        .bannerBgc {
          width: 1920px;
          height: 64px;

          svg {
            color: rgb(0, 158, 231);
            width: 1920px;
            height: 64px;
          }
        }

        .header-box-img-title {
          position: absolute;
          z-index: 3;
        }

        .right-box {
          position: absolute;
          right: 35px;
          z-index: 1003;
        }
      }
    }

    // 主题设置头部和标题样式
    .setting-theme {
      .el-drawer__header {
        margin-bottom: 6px;
      }

      .el-drawer__title {
        color: $textColor;
      }
    }

    .el-descriptions__table {
      border-collapse: separate;
      width: 100%;
      border-spacing: 5px;

      .el-descriptions__cell {
        padding: 5px;
        color: $textColor;
        border: 1px solid #ced9e6;
      }
    }

    .router-history .el-tabs__nav-scroll {
      background-color: $baseColor;
      position: relative;
      z-index: 99;
    }

    .statistic-card-content .statistic-card-item .statistic-card-item-title,
    .alarm-monitoring-card-box .total-box-text {
      color: $textColor;
    }

    .basicConfig_title_p,
    .basicConfig_title_bg,
    .basicConfig_title_bgTwo,
    .basicConfig_title_bgThree {
      background-color: $baseColor;
      color: $textColor;
      border: 1px solid #ced9e6;

      .flexStart {
        border: none !important;
      }
    }

    .basicConfig_title_p {
      background-color: #fafafa;
    }

    // tab页相关
    .el-tabs {
      .search-wrapper {
        background-color: $baseColor;
        border: none;
        border-radius: 4px 4px 0 0;
      }

      .content-wrapper.el-card {
        margin-top: 0;
        padding-top: 0;
      }

      .alarm-monitoring-page .content-wrapper.el-card,
      #pane-SystemConf .content-wrapper.el-card {
        padding-top: 20px;
      }
    }

    .el-tabs.el-tabs--top {
      flex-direction: column;
    }

    .el-tabs.el-tabs--top.permission-tab {
      flex-direction: row;
    }

    .el-tabs__nav.is-top {
      background: transparent;
    }

    .el-tabs__nav-prev,
    .el-tabs__nav-next {
      z-index: 999;
      background-color: $baseColor;
      line-height: 34px;
    }

    .el-card.is-always-shadow {
      box-shadow: none;
    }

    .scene-list-wrapper {
      .search-wrapper {
        background-color: $baseColor;
        border: none;
        border-radius: 4px 4px 0 0;
      }

      .content-wrapper.el-card {
        margin-top: 0;
        padding-top: 0;
      }
    }

    .el-button--primary {
      background-color: $buttonPrimaryColor;
      border: 1px solid $buttonPrimaryColor;
    }

    .el-table button {
      border: none;
    }

    .topTitle .el-button--primary {
      background-color: transparent;
    }

    table .el-button--primary {
      background-color: transparent;
    }

    // 首页相关
    .home-page {
      .home-page-row {
        margin-top: 10px;
      }

      .top-card,
      .middle-card {
        background-color: transparent;
        background-image: url(/src/assets/images/light_bg_one.png);

        .business-card {
          width: 400px;
          padding: 40px 12%;
          background-image: url(/src/assets/images/light_login_two.png);

          .business-card-title {
            color: #1c1e22;
            font-weight: 500;
          }

          .business-card-content-desc {
            color: #616872;
          }
        }

        .business-card:hover {
          width: 100%;
          padding: 40px 8% 8.47%;
          background-image: url(/src/assets/images/light_login_one.png);

          .business-card-title {
            color: $baseColor;
            font-weight: 500;
          }

          .business-card-content-desc {
            color: $baseColor;
          }
        }

        .role-card {
          .role-title {
            color: #1c1e22;
          }

          .role-desc {
            color: #616872;
          }
        }

        .flow-btn-cont .flow-btn-active {
          background: $buttonPrimaryColor;
          color: $baseColor;
        }
      }

      .top-card {
        .card-title {
          background-image: url(/src/assets/images/light_title_one.png);
        }
      }

      .middle-card {
        background: #fafcff none;

        .card-title {
          background-image: url(/src/assets/images/light_title_two.png);
        }
      }

      .bottom-card {
        background: $baseColor none;

        .card-title {
          background-image: url(/src/assets/images/light_title_three.png);
        }

        .flow-btn-cont .flow-btn-active {
          background: $buttonPrimaryColor;
          color: $baseColor;
        }

        .flow-btn-cont .flow-btn {
          border: 1px solid rgba(225, 226, 228, 1);
        }

        .flow-container .flow-box {
          background: $baseColor none;
          border: 1px solid rgba(219, 236, 255, 1);
          border-radius: 8px;
        }

        .flow-container .flow-box:hover {
          background-color: $buttonPrimaryColor;
          color: $baseColor;
        }
      }

      .el-tag.scale-box {
        border: 1px solid rgba(225, 226, 228, 1);
        border-radius: 14.5px;
        color: #81868e;
        background-color: $baseColor;

        .el-tag__content {
          color: #81868e;
        }
      }
    }

    .login-form-cont .el-input__wrapper {
      border: 1px solid #ced9e6;
    }
  }

  // 任务弹窗相关
  .taskList > span {
    color: $textColor;
  }

  .notificationResult {
    background: $sideColor;
    border-radius: 4px;
  }

  .notificationResult:hover {
    background: $sideColor;
    border-radius: 4px;
  }

  .el-dropdown-menu__item {
    color: $textColor;
  }

  // 主题内容中样式
  .el-main {
    .paginationclass {
      padding-right: 12px;
    }

    .bottom-info {
      background-color: $sideColor;
      color: $textColor;
    }

    .search-wrapper {
      background-color: $sideColor;
      border: 1px solid $sideColor;
      border-radius: 4px;

      .el-input {
        border: 1px solid #ced9e6;
        background: $baseColor;
      }
    }

    .common-search-card,
    .common-tab-container {
      background-color: $baseColor;
    }

    .common-search-card {
      .content-wrapper.el-card__body {
        box-shadow: none;
      }
    }

    .common-tab-container {
      .content-wrapper.el-card {
        background-color: $baseColor;
      }
    }

    .search-list-container .searchList .textButton button {
      background: $sideColor;
      color: $textColor;
    }

    .search-list-container .searchList .textButton .el-button--primary {
      background: $buttonPrimaryColor;
      color: $baseColor;
    }

    .content-wrapper .el-table {
      background-color: $baseColor !important;
    }

    .el-table th.el-table__cell {
      background-color: $tableThColor;
    }

    .common-tab-container {
      .content-wrapper.el-card {
        padding-top: 15px;
        box-shadow: none;
      }

      .search-list-container {
        margin: 15px 0 0;
      }
    }

    #pane-AlarmRule {
      .common-tab-container {
        .search-list-container {
          margin: -0.05rem 0 0.15rem 0;
        }
      }
    }

    .mainHeight-scene {
      //height: calc(100vh - 243px);

      .cardlist {
        background: $sideColor;
        border-radius: 8px;

        .card-img {
          background-color: $baseColor;
        }

        .info,
        .desc {
          color: $textColor;
        }
      }
    }

    .el-table {
      .el-table__row:hover {
        td {
          background: #f8fbfe;
        }
      }

      .el-table__expanded-cell {
        background-color: $sideColor !important;

        .table-expand-json {
          background-color: $baseColor;
        }
      }
    }

    .behavioral-target-box {
      background: $sideColor;
      border-radius: 4px;
      border: none;

      .name {
        color: $textColor;
      }

      .value {
        color: $textColor !important;
      }
    }

    .alarm-monitoring-card-box {
      .alarm-monitoring-card-title {
        color: $textColor;
      }

      .alarm-monitoring-card-content {
        background-color: $baseColor;
        border: 1px solid #ced9e6;
        border-radius: 4px;
      }

      .alarm-monitoring-type-box-cont {
        .alarm-monitoring-type-box,
        .alarm-monitoring-typeRight-box {
          background: $sideColor;
          border-radius: 4px;
          border: none;

          .name {
            color: $textColor;
          }
        }
      }
    }

    // 场景管理
    .flowManageTop {
      background: $sideColor;

      .left {
        .xfv-icon-back,
        span {
          color: $textColor;
        }
      }
    }

    .scenes_left {
      background: $tableThColor;
      border-radius: 0 0 0 8px;

      .x6-widget-stencil-title,
      .x6-widget-stencil-group-title {
        background: $sideColor;
      }

      .x6-widget-stencil-group-content,
      .x6-widget-stencil-search,
      .x6-widget-stencil-content {
        background-color: $baseColor;
      }

      .design-left-container-item {
        background-color: transparent;
        border: 1px solid #c7d3e2;
        border-radius: 4px;
        color: #7087a1;
      }

      .design-left-container-item.design-active {
        background-color: $buttonPrimaryColor;
        color: $baseColor;
        border: 1px solid $buttonPrimaryColor;
      }
    }

    .screen_content {
      .nodeMenu {
        background: $baseColor;
        border: none;
        border-radius: 4px;
        color: $textColor;
      }
    }

    // 拓扑设计
    .el-collapse {
      .el-collapse-item__header {
        padding: 0 15px;
        background: $tableThColor;
      }

      .el-collapse-item__wrap {
        background: $tableThColor;
      }

      .left_content {
        background: $baseColor;
        border-radius: 8px;

        .imgbox {
          background: $baseColor;
          border: 1px solid #ced9e6;
          border-radius: 4px;
        }
      }
    }

    .isdisable-top-box {
      background: $baseColor;
    }

    .rightAside {
      .el-card {
        overflow: hidden;
      }
    }

    .flowTop {
      background: $sideColor;

      .iconOption {
        .el-icon {
          color: $buttonPrimaryColor;
        }
      }
    }

    .flowIndex {
      .el-dropdown {
        color: $textColor;
      }
    }

    // 计算节点-资源管理
    .resource-list-left {
      background-color: $baseColor;

      .el-menu-item.is-active {
        background: $sideColor;
        color: $buttonPrimaryColor;
      }
    }

    .el-tabs--border-card {
      background-color: $baseColor;
      border: 1px solid #ced9e6 !important;
      border-radius: 4px;

      .el-tabs__header.is-top {
        background-color: $baseColor;
        .el-tabs__item.is-active {
          background-color: $sideColor;
        }
      }
    }

    .drag-progress-box {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .playbackReturn,
    .start-progress-time,
    .end-progress-time,
    .progress-curDate {
      color: #fff;
    }

    // 角色权限
    .permission-tree {
      .el-drawer__header h4 {
        color: $textColor;
      }
    }
  }

  .el-menu-vertical {
    background-color: $sideColor;
  }

  // 侧边栏相关
  .aside {
    .is-active .el-sub-menu__icon-arrow svg {
      color: #fff;
    }

    svg,
    .is-active.is-opened .el-sub-menu__icon-arrow svg {
      color: #5b6775;
      fill: currentColor;
    }

    .el-sub-menu {
      .el-menu--inline {
        background: $sideColor;

        .el-menu-item {
          color: $textColor;

          .basic-menu-item-title {
            color: $textColor;
          }

          &.is-active .basic-menu-item {
            background: $buttonPrimaryColor;

            .basic-menu-item-title {
              color: $baseColor;
            }

            svg {
              color: $baseColor;
              fill: currentColor;
            }
          }
        }
      }

      .el-sub-menu__title {
        color: $textColor;
      }

      &.is-active:not(.is-opened) {
        .el-sub-menu__title {
          .basic-subMenu {
            background: $buttonPrimaryColor !important;
          }
        }
      }
    }

    .basic-menu-item .basic-menu-item-title {
      color: $textColor;
    }

    .el-menu-item {
      &.is-active .basic-menu-item {
        .basic-menu-item-title {
          color: $baseColor;
        }

        svg {
          color: $baseColor;
          fill: currentColor;
        }
      }
    }

    .el-menu-item.is-active .basic-menu-item {
      background: $buttonPrimaryColor;
    }
  }

  .rightAside .downloadImg {
    svg {
      fill: currentColor;
      font-size: 14px;
    }
  }

  .el-menu-item:hover {
    background: $tableThColor;

    .basic-menu-item-title {
      color: $buttonPrimaryColor;
    }
  }

  .el-sub-menu:hover {
    .el-sub-menu__title {
      background: $tableThColor;
      color: $buttonPrimaryColor;
    }
  }

  // 弹窗相关
  .el-dialog {
    .el-dialog__close {
      color: $textColor;
    }

    .el-dialog__footer {
      border-top: 1px solid #e6ecf2;
    }

    .el-button--primary {
      background-color: $buttonPrimaryColor;
    }

    .box {
      background: $baseColor;
      border: 1px solid #ced9e6;
      border-radius: 4px;

      .box-contant .box-item .box-left {
        background: $baseColor;
      }

      .box-title {
        color: $textColor;
      }
    }

    // 富文本编辑器相关
    .quill-container {
      .ql-toolbar.ql-snow,
      .ql-container.ql-snow {
        border: 1px solid $buttonPrimaryColor;
      }

      .ql-snow .ql-stroke {
        stroke: #444;
      }

      .ql-snow .ql-picker {
        color: #444;
      }

      .ql-snow .ql-picker-options .ql-picker-item {
        color: #666;
      }

      .ql-snow .ql-fill {
        fill: #444;
      }
    }
  }

  // 抽屉式弹窗相关
  .el-drawer {
    .vmConfig,
    .dockerConfig {
      > div {
        background: $baseColor;
        border: 1px solid #ced9e6;
        border-radius: 4px;
      }
    }

    .el-drawer__close {
      color: $textColor;
    }
  }

  .drawer {
    background: $baseColor;
    border-radius: 8px 0px 0px 8px;
    box-shadow: 0px 4px 12px rgba(1, 16, 39, 0.16);

    .moduleConfigTitle {
      border-bottom: 1px solid #e6ecf2;

      span {
        color: $textColor;
      }
    }

    .basicConfig_title {
      color: $textColor;
    }

    .flexStart {
      color: $textColor;
      background-color: $baseColor;
      border: 1px solid #ced9e6 !important;
      border-radius: 4px;
    }

    .flexStart_title {
      border: none !important;
    }

    #pane-third,
    #pane-first {
      height: calc(100% - 20px);
    }

    .basicConfig_docker,
    .basicConfig_container,
    .avatar-uploader,
    .el-descriptions-item {
      background: $baseColor;
      border: 1px solid #ced9e6;
      border-radius: 4px;
      color: $textColor;
    }
  }

  .delButtonClass {
    background-color: $buttonPrimaryColor;
    color: $baseColor;
    border: 1px solid $buttonPrimaryColor;
  }

  .el-carousel__indicator--horizontal {
    color: red;
  }

  .contextMenu,
  .contextmenu {
    background: $baseColor;
    border: 1px solid #ced9e6;
    border-radius: 4px;

    li:hover {
      background-color: #def2ff;
      color: $textColor;
    }
  }

  table .el-button--primary > span {
    color: $textColor;
  }

  .el-drawer.flowDrawer .el-drawer__header {
    padding: 12px;
  }

  .el-container.layout-cont
    .main-cont
    .router-history
    .el-tabs__header
    .el-tabs__item {
    background-color: $baseColor;
  }

  // 分页器相关
  #app .el-pagination .el-pager li.is-active {
    background-color: $buttonPrimaryColor;
    color: $baseColor;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent;
  }

  .el-pagination.is-background .el-pager li {
    background-color: $baseColor;
  }

  #app .el-carousel__button {
    background-color: $textColor;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: #f8fbfe;
  }

  // 流量态势相关
  .flow-page {
    .el-select__wrapper,
    .el-date-editor--datetimerange {
      background-color: transparent;
      box-shadow: 0 0 0 1px $buttonPrimaryColor inset;
    }

    .flow-page-title {
      background-color: #01142c;
    }

    .el-table th.el-table__cell {
      background-color: transparent;
    }

    .el-table {
      .el-table__row:hover {
        td {
          background: #062144;
        }
      }
    }

    .el-select__placeholder,
    .el-date-editor .el-range-input {
      color: $baseColor;
    }

    /* ---el-table滚动条公共样式--- */
    ::-webkit-scrollbar {
      width: 8px;
      /* 设置滚动条的宽度 */
      height: 8px;
      /* 设置滚动条的高度 */
    }

    /* 滚动条轨道的样式 */
    ::-webkit-scrollbar-track {
      background: #002658;
      /* 设置轨道的背景颜色 */
    }

    /* 滚动条的样式 */
    ::-webkit-scrollbar-thumb {
      background: #175292;
      /* 设置滚动条的背景颜色 */
      border-radius: 5px;
      /* 设置滚动条的圆角 */
    }

    /* 当鼠标悬停在滚动条上时的样式 */
    ::-webkit-scrollbar-thumb:hover {
      background: #175292;
      /* 设置鼠标悬停时滚动条的背景颜色 */
    }
  }

  //全链路
  .end-to-end-page {
    .flow-page-title {
      background-color: #010720;
    }
  }

  .compute-node-dashboard-title {
    color: $textColor !important;
  }

  .screen_content {
    background: $baseColor; // Main background for the content area
    color: $textColor; // Default text color

    .left {
      background: $tableThColor; // Lighter blue for the left panel
      border-radius: 5px;
      color: $textColor;
    }

    .main {
      background: $baseColor; // White background for the main canvas area
      color: $textColor;
    }

    .resource-pane {
      background: $baseColor; // White for the resource pane background
      box-shadow: 0 2px 12px rgba(0, 160, 233, 0.06); // Using a hint of the primary blue for shadow
    }

    .group-bar {
      .group-btn {
        background: $baseColor;
        color: $textColor;
        border: 1.5px solid #ced9e6; // Standard border
        &:hover,
        &.active {
          background: $buttonPrimaryColor; // Theme's primary blue for active/hover
          color: $baseColor; // White text on primary blue
          border-color: $buttonPrimaryColor;
        }
      }
    }

    .search-card {
      background: $baseColor;
      .compact-search-input {
        .el-input__wrapper {
          border: 2px solid #ced9e6; // Standard border
          background: $baseColor;
        }
        input {
          color: $textColor;
        }
        &.is-focus .el-input__wrapper {
          border-color: $buttonPrimaryColor; // Theme's primary blue for focus
          background: $baseColor;
        }
      }
    }

    .resource-collapse {
      background: transparent;
      .custom-collapse-item {
        background: $sideColor; // Light blue for collapse item background
        border: 1.5px solid #ccebff; // Lighter border for the light blue bg
        .el-collapse-item__header {
          color: $textColor;
          background: $sideColor; // Light blue for header
          border-left: 3px solid $buttonPrimaryColor; // Theme's primary blue for accent
        }
        .el-collapse-item__wrap {
          background: $baseColor; // White for content area of collapse
        }
      }
    }

    .resource-list {
      background: transparent;
    }

    .resource-card {
      background: $baseColor;
      border: 1.5px solid #ced9e6; // Standard border
      color: $textColor;
      &:hover {
        background: $tableThColor; // Very light blue for hover
        border-color: $buttonPrimaryColor; // Theme's primary blue for hover border
      }
      .icon-bg {
        //background: $baseColor;
        //border: 1.5px solid #c9d5e2;
      }
      .resource-name {
        color: $textColor;
      }
    }

    .leftIcon {
      .lefticonimg {
        background-image: url('@/assets/topo/right.png');
      }
      .righticonimg {
        background-image: url('@/assets/topo/left.png');
      }
    }

    .nodeMenu {
      background: $baseColor;
      color: $textColor;
      border: 1px solid #ced9e6; // Standard border for context menu
      li:hover {
        background-color: $sideColor; // Light blue for hover
        color: $buttonPrimaryColor; // Theme's primary blue for text on hover
      }
    }
  }
}
